﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
    <title></title>
    <style>
        .spread-top {
            height: 2rem;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 1;
        }

        #head[data-v-6cecc3ed] {
            padding-top: 2.6rem;
            margin-bottom: 1px;
        }

        .type {
            height: 1.95rem;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: center;
            justify-content: center;
            font-size: .7rem;
            color: #5e5e5e;
            background: #eee;
        }

        .head[data-v-6cecc3ed] {
            height: 2.6rem;
            background: #fff;
            border-bottom: 1px solid #d7dbdd;
            text-align: center;
            line-height: 2.6rem;
            font-size: .9rem;
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            z-index: 10;
        }

        .head .head-close[data-v-6cecc3ed] {
            width: .55rem;
            height: .9rem;
            position: absolute;
            margin-left: 1rem;
            margin-top: .875rem;
        }

        .head .head-close img[data-v-6cecc3ed] {
            display: block;
            width: 100%;
        }

        .head .title[data-v-6cecc3ed] {
            width: 10rem;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .type span {
            display: inline-block;
        }

        .type img {
            display: inline-block;
            width: .625rem;
            height: .325rem;
            margin-left: .4rem;
        }

        .box-out {
            padding-top: 5rem;
        }

        .mint-loadmore {
            overflow: hidden;
        }

        .box {
            padding: 0.5rem 0.5rem .5rem;
            background: #fff;
            border-top: 1px solid #d7dbdd;
            border-bottom: 1px solid #d7dbdd;
            margin-bottom: .5rem;
        }

            .box .box-top {
                position: relative;
            }

                .box .box-top .goods-title {
                    font-size: .7rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #5e5e5e;
                    width: 80%;
                }

                .box .box-top .shops-name {
                    font-size: .7rem;
                    color: #b0b0b0;
                    padding: .1rem 0;
                }

                .box .box-top .time {
                    font-size: .7rem;
                    color: #b0b0b0;
                    padding-bottom: .3rem;
                }

                .box .box-top .order-status.fail {
                    background: #ccc;
                }

                .box .box-top .order-status {
                    width: 3.2rem;
                    height: 1.1rem;
                    border-radius: .5rem;
                    line-height: 1.1rem;
                    text-align: center;
                    font-size: .7rem;
                    position: absolute;
                    right: 0;
                    bottom: .5rem;
                    color: #fff;
                }

            .box .box-middle {
                display: -ms-flexbox;
                display: flex;
                border-top: 1px solid #d7dbdd;
                border-bottom: 1px solid #d7dbdd;
                padding: .4rem 0;
            }

                .box .box-middle .item .money-title {
                    font-size: .5rem;
                    color: #5e5e5e;
                }

                .box .box-middle .item .money {
                    font-size: .8rem;
                    margin-top: .3rem;
                    color: #242424;
                }

                .box .box-middle .item {
                    -ms-flex: 1;
                    flex: 1;
                    text-align: center;
                }

                    .box .box-middle .item .money-title {
                        font-size: .7rem;
                        color: #5e5e5e;
                    }

                    .box .box-middle .item .money {
                        font-size: .8rem;
                        margin-top: .3rem;
                        color: #242424;
                    }

            .box .box-bottom {
                font-size: .7rem;
                margin-top: .3rem;
                color: #494949;
            }

                .box .box-bottom span {
                    color: #b0b0b0;
                }

        body {
            background: #eee;
        }

        body, html {
            font-size: 20px;
            margin: 0;
            padding: 0;
        }

        body {
            display: block;
            margin: 8px;
        }

        div {
            display: block;
        }

        .mint-actionsheet {
            position: fixed;
            background: #e0e0e0;
            width: 100%;
            text-align: center;
            bottom: 0;
            left: 50%;
            -webkit-transform: translate3d(-50%,0,0);
            transform: translate3d(-50%,0,0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transition: -webkit-transform .3s ease-out;
            transition: -webkit-transform .3s ease-out;
            transition: transform .3s ease-out;
            transition: transform .3s ease-out,-webkit-transform .3s ease-out;
        }

        .mint-actionsheet-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        ul, menu, dir {
            display: block;
            list-style-type: disc;
            -webkit-margin-before: 1em;
            -webkit-margin-after: 1em;
            -webkit-margin-start: 0px;
            -webkit-margin-end: 0px;
            -webkit-padding-start: 40px;
        }

        .mint-actionsheet-button, .mint-actionsheet-listitem {
            display: block;
            width: 100%;
            height: 45px;
            line-height: 45px;
            font-size: 18px;
            color: #333;
            background-color: #fff;
        }

        .mint-actionsheet-listitem {
            border-bottom: 1px solid #e0e0e0;
        }

        li {
            display: list-item;
            text-align: -webkit-match-parent;
        }

        .mint-datetime, .v-modal {
            width: 100%;
        }

        .v-modal {
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            opacity: .5;
            background: #000;
        }
        .searchbox .sb-search {
            position: relative;
            box-shadow: 0 2px 2px rgba(0,0,0,.1);
            height: 44px;
        }
            .searchbox .sb-search form {
                position: relative;
                margin-right: 10px;
                padding: 5px 0 5px 6px;
                box-sizing: border-box;
                height: 100%;
            }
                .searchbox .sb-search form input[type=search] {
                    padding-left: 30px;
                    float: left;
                    width: 100%;
                    background: #FFF;
                    vertical-align: middle;
                    height: 100%;
                    box-shadow: none;
                    -webkit-appearance: none;
                    border: none;
                    outline: 0;
                    color: #333;
                    font-size: 14px;
                    border-radius: 2px;
                    -webkit-border-radius: 2px;
                    -moz-border-radius: 2px;
                    -ms-border-radius: 2px;
                }
                .searchbox .sb-search form input[type=submit] {
                    background: url() 50% 50% no-repeat;
                    position: absolute;
                    left: 8px;
                    top: 16px;
                    margin-top: -7px;
                    width: 15px;
                    height: 15px;
                    border: none;
                    color: transparent;
                    padding: 7px 5px;
                    box-sizing: initial;
                    outline:none;
                    background-size:15px;
                }
    </style>
</head>
<body>





    <div id="app">
        <div id="spread">
            <div class="spread-top">
                <div data-v-6cecc3ed="" id="head">
                    <div data-v-6cecc3ed="" class="head">
                        <div data-v-6cecc3ed="" class="head-close">
                            <img data-v-6cecc3ed="" src="">
                        </div>
                        <span data-v-6cecc3ed="" class="title">推广订单</span>
                    </div>
                </div>
                <div class="search-area" style=""><div id="J_PopSearch" class="searchbox"><div class="sb-search"><div class="sb-search"><form action="/admin/search.html" method="get"><input type="search" id="searchInput" name="key" value="" title="请输入搜索文字" placeholder="输入关键字查找订单"> <input type="submit" title="提交"></form></div></div></div></div>
            </div>
            <div class="box-out">
                <div class="mint-loadmore">
                    <div class="mint-loadmore-content" style="transform: translate3d(0px, 0px, 0px);">
                        <div class="box">
                            <div class="box-top">
                                <div class="goods-title">金禧康护眼仪眼部按摩器眼睛按摩仪眼保仪眼罩去黑眼圈眼袋眼保姆</div>
                                <div class="shops-name">所属店铺:金禧康旗舰店</div>
                                <div class="time">创建:2017-07-08 02:59</div>
                                <div class="order-status fail">
                                    <span style="display: none;">已付款</span> <span style="display: none;">已结算</span> <span>已失效</span>
                                </div>
                            </div>
                            <div class="box-middle">
                                <div class="item">
                                    <div class="money-title">付款金额</div>
                                    <div class="money" style="font-size: 0.8rem;">￥199.00</div>
                                </div>
                                <div class="item">
                                    <div class="money-title">佣金</div>
                                    <div class="money" style="font-size: 18px;  font-weight: bold; color: #fe4f3f;">￥21.00</div>
                                </div>
                                <!--<div  class="item">
                                <div  class="money-title">提成</div>
                                <div  class="money">0%</div></div>-->
                            </div>
                            <div class="box-bottom"><span>订单编号:</span>30159923966752703</div>
                        </div>

                    </div>
                </div>
                <div class="mint-loadmore">
                    <div class="mint-loadmore-content" style="transform: translate3d(0px, 0px, 0px);">
                        <div class="box">
                            <div class="box-top">
                                <div class="goods-title">金禧康护眼仪眼部按摩器眼睛按摩仪眼保仪眼罩去黑眼圈眼袋眼保姆</div>
                                <div class="shops-name">所属店铺:金禧康旗舰店</div>
                                <div class="time">创建:2017-07-08 02:59</div>
                                <div class="order-status fail">
                                    <span style="display: none;">已付款</span> <span style="display: none;">已结算</span> <span>已失效</span>
                                </div>
                            </div>
                            <div class="box-middle">
                                <div class="item">
                                    <div class="money-title">付款金额</div>
                                    <div class="money" style="font-size: 0.6rem;">￥199.00</div>
                                </div>
                                <div class="item">
                                    <div class="money-title">佣金</div>
                                    <div class="money" style="font-size: 16px;  font-weight: bold; color: #fe4f3f;">￥21.00</div>
                                </div>
                                <!--<div  class="item">
                    <div  class="money-title">提成</div>
                    <div  class="money">0%</div></div>-->
                            </div>
                            <div class="box-bottom"><span>订单编号:</span>30159923966752703</div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="mint-actionsheet" style="z-index: 2003; display: none;">
                <ul class="mint-actionsheet-list" style="margin-bottom: 0px;">
                    <li class="mint-actionsheet-listitem">所有订单</li>
                    <li class="mint-actionsheet-listitem">已付款</li>
                    <li class="mint-actionsheet-listitem">已失效</li>
                    <li class="mint-actionsheet-listitem">已结算</li>
                </ul>
            </div>
            <div class="v-modal" style="z-index: 2004; display: none;"></div>
        </div>
    </div>
</body>
</html>
